<script setup>
import { useRoute, useRouter } from 'vue-router'
// 导入状态仓库
import { mainStore } from '@/stores/index'
// 导入storeToRefs
import { storeToRefs } from 'pinia'
// { tagLists }解构会导致响应式特性丢失
// const { tagLists } = mainStore()
// store对象
const store = mainStore()
// storeToRefs解决响应式特性丢失问题
const { tagLists } = storeToRefs(store)
const route = useRoute() // 路由信息
const router = useRouter() // 路由对象

// 点击Tab切换选项卡-跳转路由
const handleTab = (item) => {
  // console.log(item)
  if(route.path === item.url) return // 判断路由url是否相等，相等不需要跳转，停止执行
  router.push(item.url) // 执行路由跳转
}

// 点击按钮关闭页面
const handleClose = (item, index) => {
  // console.log(item,index)
  store.delTag(index) // 传递index索引给store的delTag函数
  // 判断路由是否相等
  if(route.path === item.url) {
    // 判断是否是最后一个按钮
    if(index == tagLists.value.length) {
      router.push(tagLists.value[index - 1].url) // 传递当前index索引减1给最后一个赋值 执行路由跳转
    } else {
      router.push(tagLists.value[index].url) // 传递当前index索引 执行路由跳转
    }
  }
}
</script>

<template>
  <!--tab菜单-->
  <div class="tag-group">
    <el-tag
      v-for="(item, index) in tagLists"
      :key="item.url"
      :closable="item.url !== '/index'"
      :type="(item.url === route.path)?'primary':'info'"
      @click="handleTab(item)"
      @close="handleClose(item, index)"
    >{{item.name}}</el-tag>
  </div>
</template>

<style lang="scss" scoped>
.tag-group{
  padding: 0 20px;
  background-color: #fff;
  height: 35px;
  display: flex;
  align-items: center;
  .el-tag{
    margin-right: 8px;
    cursor: pointer;
  }
}
</style>